<template>
	<view class="container">
		<view class="input-wrapper">
			<textarea class="title-input" placeholder="请输入内容" v-model="title"></textarea>
		</view>
		<view class="input-wrapper">
			<uni-file-picker class="file-picker" v-model="imageUrl"></uni-file-picker>
		</view>
		<view class="button-group">
			<button class="cancel-button" @click="esc">取消</button>
			<button class="publish-button" @click="published">发布</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userId: 0,
			title: '',
			imageUrl: [],
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '编辑帖子'
		});
		this.userId = uni.getStorageSync('userId');
	},
	methods: {
		published() {
			uni.request({
				url: 'http://localhost:8090/api/contents/save',
				method: 'POST',
				data: {
					contentId: 0,
					createdAt: '',
					imageUrl: this.imageUrl,
					title: this.title,
					userId: this.userId
				},
				success: (res) => {
					if (res.data.success) {
						uni.showToast({
							title: '已成功发布帖子',
							icon: 'success',
						});
						this.title = '';
						this.imageUrl = '';
						uni.navigateBack();
					} else {
						uni.showModal({
							title: '发布失败',
							content: '发布帖子时遇到问题，请稍后重试！',
						});
					}
				},
				fail: () => {
					uni.showModal({
						title: '网络错误',
						content: '无法连接服务器，请检查网络连接！',
					});
				}
			})
		},
		esc() {
			this.title = '';
			this.imageUrl = '';
			uni.navigateBack();
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.input-wrapper {
	width: 100%;
	margin-bottom: 20rpx;
}

.title-input {
	width: 100%;
	height: 200rpx;
	border: 1px solid #ccc;
	border-radius: 5rpx;
	padding: 10rpx;
}

.file-picker {
	width: 100%;
}

.button-group {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.cancel-button,
.publish-button {
	width: 45%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 5rpx;
	text-align: center;
}

.cancel-button {
	background-color: #ccc;
	color: #fff;
}

.publish-button {
	background-color: #007AFF;
	color: #fff;
}
</style>
